<template>
  <div class="app-container">
    <el-card header="平台信息">
      <el-row :gutter="10" v-if="configInfoData.sip">
        <el-col :xs="0" :sm="0" :md="0" :lg="4" :xl="4">
          <div class="one">
            <img class="productImg" src="@/assets/images/shebei.png">
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20" class="one">
          <el-descriptions title="国标服务信息">
            <el-descriptions-item label="编号:">{{ configInfoData.sip.id }}</el-descriptions-item>
            <el-descriptions-item label="域:">{{ configInfoData.sip.domain }}</el-descriptions-item>
            <el-descriptions-item label="IP:">{{ configInfoData.sip.showIp }}</el-descriptions-item>
            <el-descriptions-item label="端口:">{{ configInfoData.sip.port }}</el-descriptions-item>
            <el-descriptions-item label="密码:">
              <el-tag size="small">{{ configInfoData.sip.password }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-empty description="暂无国标服务信息" style="height: 180px;" v-else/>
    </el-card>

    <el-card style="margin-top: 10px;"  header="设备信息">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-col" v-if="deviceInfo">
          <el-progress v-if="deviceInfo.total > 0" :width="100" :stroke-width="8" type="circle"
                       :percentage="Math.floor(deviceInfo.online/deviceInfo.total*100)"
                       style="margin-top: 20px; font-size: 18px"></el-progress>
          <el-progress v-if="deviceInfo.total === 0" :width="100" :stroke-width="8" type="circle" :percentage="0"
                       style="margin-top: 20px; font-size: 18px"></el-progress>
          <div class="resourceInfo">
            设备总数:{{ deviceInfo.total }}<br/>
            在线数:{{ deviceInfo.online }}
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-col" v-if="channelInfo">
          <el-progress v-if="channelInfo.total > 0" :width="100" :stroke-width="10" type="circle"
                       :percentage="Math.floor(channelInfo.online/channelInfo.total*100)"
                       style="margin-top: 20px"></el-progress>
          <el-progress v-if="channelInfo.total === 0" :width="100" :stroke-width="10" type="circle" :percentage="0"
                       style="margin-top: 20px"></el-progress>
          <div class="resourceInfo">
            通道总数:{{ channelInfo.total }}<br/>
            在线数:{{ channelInfo.online }}
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-col" v-if="pushInfo">
          <el-progress v-if="pushInfo.total > 0" :width="100" :stroke-width="10" type="circle"
                       :percentage="Math.floor(pushInfo.online/pushInfo.total*100)"
                       style="margin-top: 20px"></el-progress>
          <el-progress v-if="pushInfo.total === 0" :width="100" :stroke-width="10" type="circle" :percentage="0"
                       style="margin-top: 20px"></el-progress>
          <div class="resourceInfo">
            推流总数:{{ pushInfo.total }}<br/>
            在线数:{{ pushInfo.online }}
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="card-col" v-if="proxyInfo">
          <el-progress v-if="proxyInfo.total > 0" :width="100" :stroke-width="10" type="circle"
                       :percentage="Math.floor(proxyInfo.online/proxyInfo.total*100)"
                       style="margin-top: 20px"></el-progress>
          <el-progress v-if="proxyInfo.total === 0" :width="100" :stroke-width="10" type="circle" :percentage="0"
                       style="margin-top: 20px"></el-progress>
          <div class="resourceInfo">
            拉流代理总数:{{ proxyInfo.total }}<br/>
            在线数:{{ proxyInfo.online }}
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px;" header="设备列表">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="getGBDevices" v-hasPermi="['iot:gb:devices']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="deviceList" border >
        <el-table-column prop="name" label="名称" min-width="160" align="center" fixed></el-table-column>
        <el-table-column prop="deviceId" label="设备编号" min-width="200" align="center"></el-table-column>
        <el-table-column label="ip地址" min-width="160" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.hostAddress" size="medium">{{ scope.row.hostAddress }}</el-tag>
              <el-tag v-if="!scope.row.hostAddress" size="medium">未知</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.onLine">在线</el-tag>
              <el-tag size="medium" type="info" v-if="!scope.row.onLine">离线</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="厂家" min-width="120" align="center"></el-table-column>
        <el-table-column prop="transport" label="信令传输模式" min-width="120" align="center"></el-table-column>
        <el-table-column prop="channelCount" label="通道数" min-width="120" align="center"></el-table-column>
        <el-table-column prop="keepaliveTime" label="最近心跳" min-width="160" align="center"></el-table-column>
      </el-table>
      <pagination
          v-show="deviceTotal>0"
          :total="deviceTotal"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.count"
          @pagination="getGBDevices"
      />
    </el-card>

    <el-card style="margin-top: 10px;" header="推流列表">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="getGBPush" v-hasPermi="['iot:gb:pushList']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="pushLoading" :data="pushList" border >
        <el-table-column prop="gbName" label="名称" min-width="200" align="center"></el-table-column>
        <el-table-column prop="app" label="应用名" min-width="100" align="center"></el-table-column>
        <el-table-column prop="stream" label="流ID" min-width="200" align="center"></el-table-column>
        <el-table-column label="推流状态"  min-width="100" align="center">
          <template v-slot:default="scope">
            <el-tag size="medium" v-if="scope.row.pushing">推流中</el-tag>
            <el-tag size="medium" type="info" v-if="!scope.row.pushing">已停止</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="gbDeviceId" label="国标编码" min-width="200" align="center"></el-table-column>
        <el-table-column prop="mediaServerId" label="流媒体" min-width="200" align="center"></el-table-column>
        <el-table-column label="开始时间"  min-width="200" align="center">
          <template v-slot:default="scope">
            <el-button-group>
              {{ scope.row.pushTime == null? "-":scope.row.pushTime }}
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="pushTotal>0"
          :total="pushTotal"
          v-model:page="queryParamsPush.page"
          v-model:limit="queryParamsPush.count"
          @pagination="getGBPush"
      />
    </el-card>

    <el-card style="margin-top: 10px;" header="拉流代理列表">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="RefreshRight" @click="getGBProxy" v-hasPermi="['iot:gb:proxyList']">刷新</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="proxyLoading" :data="proxyList" border >
        <el-table-column prop="app" label="流应用名" min-width="120" align="center" show-overflow-tooltip/>
        <el-table-column prop="stream" label="流ID" min-width="120" align="center" show-overflow-tooltip/>
        <el-table-column label="流地址" min-width="250" align="center" show-overflow-tooltip >
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">
                <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="scope.row.srcUrl" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
                {{scope.row.srcUrl}}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mediaServerId" label="流媒体" min-width="180" align="center"/>
        <el-table-column label="代理方式" width="100" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              {{scope.row.type === "default"? "默认":"FFMPEG代理"}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gbDeviceId" label="国标编码" min-width="180" align="center" show-overflow-tooltip/>
        <el-table-column label="拉流状态" min-width="120" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.pulling">正在拉流</el-tag>
              <el-tag size="medium" type="info" v-if="!scope.row.pulling">尚未拉流</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="启用" min-width="120" align="center">
          <template v-slot:default="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
              <el-tag size="medium" type="info" v-if="!scope.row.enable">未启用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"  min-width="150" align="center" show-overflow-tooltip/>
      </el-table>
      <pagination
          v-show="proxyTotal>0"
          :total="proxyTotal"
          v-model:page="queryParamsProxy.page"
          v-model:limit="queryParamsProxy.count"
          @pagination="getGBProxy"
      />
    </el-card>
  </div>
</template>

<script setup name="Gb28181">
import {getConfigInfo, getResourceInfo, getDeviceList, getProxyList, getPushList} from "@/api/iot/gb";
import {onMounted} from "vue";

/**
 * 国标服务信息获取
 * @type {*}
 */
const configInfoData = ref({});

async function getGBConfig() {
  const res = await getConfigInfo();
  configInfoData.value = res.data;
}

/**
 * 获取gb状态
 * @type {*}
 */
const deviceInfo = ref(null);
const channelInfo = ref(null);
const pushInfo = ref(null);
const proxyInfo = ref(null);

async function getGBResource() {
  const res = await getResourceInfo();
  if (res.data){
    const data = res.data;
    deviceInfo.value = data.device;
    channelInfo.value = data.channel;
    pushInfo.value = data.push;
    proxyInfo.value = data.proxy;
  }
}

/**
 * 设备列表获取
 * @type {*}
 */
const queryParams = ref({
  page: 1,
  count: 10,
})
const deviceList = ref([]);
const deviceTotal = ref(0);
const loading = ref(true);
async function getGBDevices() {
  const res = await getDeviceList(queryParams.value);
  if (res.data) {
    deviceList.value = res.data.list;
    deviceTotal.value = res.data.total;
  }
  loading.value = false;
}

/**
 * 推流列表获取
 * @type {*}
 */
const queryParamsPush = ref({
  page: 1,
  count: 10,
})
const pushList = ref([]);
const pushTotal = ref(0);
const pushLoading = ref(true);
async function getGBPush() {
  const res = await getPushList(queryParamsPush.value);
  if (res.data) {
    pushList.value = res.data.list;
    pushTotal.value = res.data.total;
  }
  pushLoading.value = false;
}

/**
 * 拉流代理列表获取
 * @type {*}
 */
const queryParamsProxy = ref({
  page: 1,
  count: 10,
})
const proxyList = ref([]);
const proxyTotal = ref(0);
const proxyLoading = ref(true);
async function getGBProxy() {
  const res = await getProxyList(queryParamsProxy.value);
  if (res.data) {
    proxyList.value = res.data.list;
    proxyTotal.value = res.data.total;
  }
  proxyLoading.value = false;
}

onMounted(async () => {
  await getGBConfig();
  await getGBResource();
  await getGBDevices();
  await getGBPush();
  await getGBProxy();
})

</script>

<style scoped>
.one {
  width: 100%;
  padding: 20px;
}

.productImg {
  width: 100px;
}

.card-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.resourceInfo {
  width: 100%;
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}
</style>